import React, { Component } from 'react';
import FooterPage from '@components/layout/footerPage';
import { Menu, Table ,Breadcrumb,List, Button,message} from 'antd';
import { useState } from 'react';
import axios from 'axios';
import { useEffect } from 'react';
// import Labrules from './labrules';


const InformationCenter = (props) => {
  const [current, setCurrent] = useState('trends');
  const [ruleData, setruleData] = useState([]);
  const [inforData, setinforData] = useState([]);
  const [hoveredItem, setHoveredItem] = useState(null);
  const [selectedNews, setSelectedNews] = useState(null);
  const [messageApi] = message.useMessage();

  const handleClick = (e) => {
    setCurrent(e.key);
    if (selectedNews) {
      return 
    }
    const element = document.getElementById(e.key);
    if (element) {
      const nonshowList = document.querySelectorAll('.nonshowinfo');
      nonshowList.forEach((element) => {
        element.classList.remove('show');
      });
      element.classList.add('show');
    }
    else{
      setSelectedNews(null);
    }
  };
  const handleNewsClick = (news) => {
    setSelectedNews(news);
  };
  const handleBackClick = () => {
    setSelectedNews(null);
  };
  useEffect(() => {
    const fetchData = async () => {
      try {
        const ruleResponse = await axios.get('http://localhost:8080/web/lab_rules/list', {});
        setruleData(ruleResponse.data.data);

        const inforResponse = await axios.get('http://localhost:8080/web/lab_info/list', {});
        setinforData(inforResponse.data.data);
        console.log(inforResponse.data.data)

      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);
  
    return (
        <div className={'overview'}>
        <div className={'content01'}>
          {/*左导航*/}
          <div className={'left-box-01'}>
            <div className={'kong-01'}></div>
            <Menu  style={{fontSize:"18px",height:"20px"}} onClick={handleClick} selectedKeys={[current]} mode="inline">
              <Menu.Item  key="trends">实验室动态</Menu.Item>  
              <Menu.SubMenu key="rules" title="规章制度" className="rule-submenu">
                {ruleData.map((rule) => (
                <Menu.Item key={rule.id}>
                    {rule.name}
                </Menu.Item >
                ))}
                </Menu.SubMenu>     
            </Menu>     
          </div>
          {/*右展示框 */}
          <div className={'right-box-01'}>
            <div className={'right-top'}>
              <p>信息中心</p>
              <div className={'nav-path fi'}>
                <Breadcrumb
                  items={[
                    {title: '首页'},
                    { title: <a>信息中心</a>},
                    {title: <a>实验室动态</a>},
                  ]}
                  />
              </div>
            </div>
            <div>
              {selectedNews ? (
                //展示新闻内容模块
                <div className="news-details">
                  <div className='backbtn-div'>
                    <Button type="primary" onClick={handleBackClick} className='backbtn'>返回</Button>
                  </div>
                  <h2>{selectedNews.name}</h2>
                  <p className="newstime">{selectedNews.time}</p>
                  <p>{selectedNews.content}</p>
                </div>
              ) : (
                <div className={`nonshowinfo show`} id="trends" >
                 <List
                  pagination={{
                    onChange: (page) => {},
                    pageSize: 12,
                  }}
                  dataSource={inforData.sort((a, b) => new Date(b.time) - new Date(a.time))}
                  renderItem={(news) => (
                    <List.Item
                      className={hoveredItem === news ? 'hovered' : ''}
                      onMouseOver={() => setHoveredItem(news)}
                      onMouseOut={() => setHoveredItem(null)}
                      onClick={() => handleNewsClick(news)}
                    >
                      {news.name} <span className="newstime">{news.time}</span>
                    </List.Item>
                  )}
                />
                </div>
              )}
            </div>
            <div>
            {ruleData.map((rule) => (
            <div className={'nonshowinfo'} id={rule.id}>
              <div key={rule.id}>
                <div className='ruletextinfor'>{rule.text}</div>
              </div>
            </div>
            ))}
          </div>
          </div>
        </div>
        <FooterPage />
      </div>
    );
  }

export default InformationCenter;
